<template>
  <div class="box">
    <h3>这是名称：{{ user.name }}</h3>
    <h3>这是年龄：{{ user.age }}</h3>
    <button @click="delAttr">删除年龄</button>
    <button @click="changeName">修改名字</button>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { reactive } from 'vue'
import myBus from '@/myBus'
export default {
  name: 'HelloWorld',
  setup(props, context) {
    console.log(context.slots,"www")
    const user = reactive({
      name: 'jack',
      age: 20,
      skill: '前端',
    })

    function delAttr() {
      delete user.age
    }

    function changeName() {
      user.name = 'tom'
    }

    myBus.emit('getData', 666)
    return {
      user,
      delAttr,
      changeName,
    }
  },
}
</script>

<style scoped></style>
